{% block sw_admin_menu_item %}
<!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events vuejs-accessibility/mouse-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
<li
    v-if="showMenuItem"
    class="sw-admin-menu__navigation-list-item"
    :class="getElementClasses(entry.id || entryPath)"
    :style="{ 'border-color': borderColor }"
    :aria-current="subIsActive(entryPath, entry.id) ? 'page' : 'false'"
    @click.prevent="$emit('menu-item-click', entry, $event.target)"
    @keydown.enter="$emit('menu-item-click', entry, $event.target)"
    @keydown.space="$emit('menu-item-click', entry, $event.target)"
    @mouseenter="$emit('menu-item-enter', entry, $event, parentEntries)"
>

    {% block sw_admin_menu_item_router_link %}
    <router-link
        v-if="entryPath"
        class="sw-admin-menu__navigation-link"
        :class="{'router-link-active': subIsActive(entryPath, entry.id)}"
        :to="getLinkToProp"
    >

        {% block sw_admin_menu_item_icon %}
        <mt-icon
            v-if="displayIcon"
            :size="iconSize"
            class="sw-admin-menu__navigation-link-icon"
            :name="getIconName(entry.icon)"
            :style="{ 'color': entry.color }"
        />
        {% endblock %}

        {% block sw_admin_menu_item_text %}
        <span
            class="sw-admin-menu__navigation-link-label"
            :class="collapsibleText ? 'collapsible-text' : ''"
            :title="getEntryLabel"
        >
            {{ getEntryLabel }}
        </span>
        {% endblock %}

        {% block sw_admin_menu_item_arrow_indicato %}
        <mt-icon
            v-if="entry.level > 1 && children.length"
            name="regular-chevron-right"
            size="8"
            class="sw-admin-menu__navigation-link-icon-arrow"
        />
        {% endblock %}

        <slot name="additional-text"></slot>
    </router-link>
    {% endblock %}

    {% block sw_admin_menu_item_external_link %}
    <a
        v-else-if="entry.link"
        :href="entry.link"
        :target="entry.target"
        :title="$tc(entry.label)"
        class="sw-admin-menu__navigation-link"
    >

        {% block sw_admin_menu_item_external_icon %}
        <mt-icon
            v-if="displayIcon"
            :size="iconSize"
            class="sw-admin-menu__navigation-link-icon"
            :name="getIconName(entry.icon)"
            :style="{ 'color': entry.color }"
        />
        {% endblock %}

        {% block sw_admin_menu_item_external_text %}
        <span
            class="sw-admin-menu__navigation-link-label"
            :class="collapsibleText ? 'collapsible-text' : ''"
            :title="getEntryLabel"
        >
            {{ getEntryLabel }}
        </span>
        {% endblock %}

        {% block sw_admin_menu_item_external_arrow_indicato %}
        <mt-icon
            v-if="entry.level > 1 && children.length"
            name="regular-chevron-right"
            size="8"
            class="sw-admin-menu__navigation-link-icon-arrow"
        />
        {% endblock %}

        <slot name="additional-text"></slot>
    </a>
    {% endblock %}

    {% block sw_admin_menu_item_navigation_link %}
    <span
        v-else
        class="sw-admin-menu__navigation-link"
        :class="{ 'router-link-active': subIsActive(entry.id) }"
    >

        {% block sw_admin_menu_item_navigation_icon %}
        <mt-icon
            v-if="displayIcon"
            :size="iconSize"
            class="sw-admin-menu__navigation-link-icon"
            :name="getIconName(entry.icon)"
            :style="{ 'color': entry.color }"
        />
        {% endblock %}

        {% block sw_admin_menu_item_navigation_text %}
        <span
            class="sw-admin-menu__navigation-link-label"
            :class="collapsibleText ? 'collapsible-text' : ''"
            :title="getEntryLabel"
        >
            {{ getEntryLabel }}
        </span>
        {% endblock %}

        <slot name="additional-text"></slot>

        {% block sw_admin_menu_item_arrow_indicator %}
        <mt-icon
            v-if="entry.level > 1 && children.length"
            name="regular-chevron-right"
            size="8"
            class="sw-admin-menu__navigation-link-icon-arrow"
        />
        {% endblock %}
    </span>
    {% endblock %}

    {% block sw_sidebar_sub_items_list %}
    <ul
        v-if="children.length > 0"
        class="sw-admin-menu__sub-navigation-list"
    >
        <!-- eslint-disable sw-deprecation-rules/no-twigjs-blocks,vue/no-duplicate-attributes,vue/no-parsing-error -->
        <template
            v-for="entry in children"
            :key="getCustomKey(entry.id || entryPath + '-separator')"
        >
            <li
                v-if="isFirstPluginInMenuEntries(entry, children)"
                :style="{ 'border-color': borderColor }"
                class="sw-admin-menu__separator"
                tabindex="0"
            >
                <span class="sw-admin-menu__separator-line"></span>
            </li>

            <sw-admin-menu-item
                :entry="entry"
                :border-color="borderColor"
                :display-icon="false"
                @menu-item-enter="onSubMenuItemEnter"
            />
        </template>
    </ul>
    {% endblock %}
</li>
{% endblock %}
